class TB {
  constructor(x) {
    x = '.'+x+' '
    this.$ulis = $(x+"ul li"); //大图片
    this.$smallD = $(x + ".small div"); //小图片
    this.$big = $(x + ".big"); //大的div
    this.$mask = $(x + ".mask"); //mask
    this.$fangda = $(x + ".fangda"); //放大的div
    this.$fangdaD = $(x + ".fangda img"); //放大的所有图片
    this.$version = $(x + ".center"); //版本的div
    this.$versions = $(x + ".center li"); //  所有版本
    this.$add = $(x + ".add"); //加入购物车
    this.$top = $(x + ".righttop"); //数量增减
    this.$down = $(x + ".rb"); //数量减少
    this.$price = $(x + ".price"); //价格
    this.price = [480, 1880, 18888, 99888]; //对应索引的价格数组
    this.bx = parseFloat($(x + ".fangda img").css("width")); //放大图片的尺寸
    this.by = parseFloat($(x + ".fangda img").css("height"));
    this.$allP = $(x + '.addbox span')
    this.$allC = $(x + '.allPrice span')
    this.$priceA = $(x + '.allPrice p')
    // console.log(this.$allP)//获取到购物车数量的span
    this.allprice = 0//设置总价默认0
    this.num = 1; //索引对应的初始数量1
    this.index = 1; //初始索引
    this.$num = $(x + ".numleft"); //显示的数量
    this.init(); //初始化
    this.flag = false;
  }
  //初始化，实现各种功能
  init() {
    this.eventTouch(); //小图片点击
    this.mask(); //移入放大图片
    this.versionsClick(); //版本点击
    this.changenum(); //修改数量
    this.addtocar(); //添加到购物车
    this.allPrice();//查看总价
  }
  eventTouch() {
    var that = this;
    this.$smallD.on("click", "img", function() {
      that.index = $(this.parentNode).index();
      that.$add.removeClass('point').addClass('point2')
      //设置可以添加
      that.flag = true;
      // 小图片高亮
      $(this.parentNode)
        .addClass("ac")
        .siblings()
        .removeClass("ac");
      //版本高亮
      $(that.$versions[that.index])
        .addClass("ac")
        .siblings()
        .removeClass("ac");
      //放大图片切换
      $(that.$fangdaD[that.index])
        .addClass("show")
        .siblings()
        .addClass("hide")
        .removeClass("show");
      //价格切换
      that.$price.text(that.price[that.index] * that.num + "元");
      //图片切换
      $(that.$ulis[that.index])
        .addClass("show")
        .siblings()
        .removeClass("show");
    });
  }
  //   进入big后mask的显示和移动，移出消失
  //   放大图片的显示和移动，移出后消失
  mask() {
    const that = this;
    this.$big.mouseover(function() {
      //mask显示
      that.$mask.addClass("show");
      //放大图片
      that.$fangda.addClass("show");
      that.$big.mousemove(function(e) {
        // mask的移动
        let x = e.pageX - $(this).offset().left - 35;
        let y = e.pageY - $(this).offset().top - 37.5;
        if (x < 0) x = 0;
        else if (280 - 70 < x && x < 280) x = 280 - 70;
        if (y < 0) y = 0;
        else if (300 - 75 < y && y < 300) y = 300 - 75;
        that.$mask.css({ left: x, top: y });
        //放大图片移动
        const mulX = (that.bx / 280) * x;
        const mulY = (that.by / 300) * y;
        $(".fangda img").css({ left: -mulX, top: -mulY });
      });
    });
    this.$big.mouseleave(function() {
      that.$mask.removeClass("show");
      that.$fangda.removeClass("show");
    });
  }
  //版本切换
  versionsClick() {
    const that = this;
    this.$version.on("click", "li", function() {
      that.flag = true;
      that.$add.removeClass('point').addClass('point2')
      that.index = $(this).index();
      //点击的版本高亮
      $(this)
        .addClass("ac")
        .siblings()
        .removeClass("ac");
      //小图片高亮
      $(that.$smallD[that.index])
        .addClass("ac")
        .siblings()
        .removeClass("ac");
      //价格切换
      that.$price.text(that.price[that.index] * that.num + "元");
      //大图片切换
      $(that.$ulis[that.index])
        .addClass("show")
        .siblings()
        .removeClass("show");
      //放大图片切换
      $(that.$fangdaD[that.index])
        .addClass("show")
        .siblings()
        .removeClass("show");
    });
  }
  //修改数量
  changenum() {
    const that = this;
    this.$down.on("click", function() {
      if (that.num == 1) {
      } else {
        that.num--;
        if (that.num == 1) that.$down.addClass("point").removeClass("point2");
        that.$num.text(that.num);
        that.$price.text(that.price[that.index] * that.num + "元");
      }
    });
    this.$top.on("click", function() {
      if(that.flag){
        that.$down.addClass("point2").removeClass("point");
      that.num++;
      that.$num.text(that.num);
      that.$price.text(that.price[that.index] * that.num + "元");
      }else{
        alert('请先选择版本')
      }
    });
  }
  //添加到购物车
  addtocar() {
    const that = this;
    this.$add.on("click", function(e) {
      that.allprice = that.allprice + that.price[that.index] * that.num
      that.$priceA.text(that.allprice)
      if (that.flag) {
        $(
          '<div id="fly" style="width:40px;height:40px;border-radius:50%;background:#008c8c;text-align:center;line-height:40px"></div>'
        ).fly({
          start: {
            left: e.clientX, //开始位置（必填）#fly元素会被设置成position: fixed
            top: e.clientY //开始位置（必填）
          },
          end: {
            left: $(".addbox span").offset().left -$(window).scrollLeft() + 25, //结束位置（必填）
            top: $(".addbox span").offset().top -$(window).scrollTop() + 15, //结束位置（必填）
            width: 20, //结束时高度
            height: 20 //结束时高度
          },
          //   autoPlay: false, //是否直接运动,默认true
          speed: 1.1, //越大越快，默认1.2
          vertex_Rtop: 100, //运动轨迹最高点top值，默认20
          onEnd: function() {
            let addnum = $(".addbox span").text() - 0; //获取数量
            $(".addbox span").text(addnum + that.num); //更改增加后的数量
            this.destroy(); //销毁动画块
          } //结束回调
        });
      } else {
        alert("请先选择版本");
      }
      // $('#fly').play(); //autoPlay: false后，手动调用运动
      // $('#fly').destroy(); //移除dom
    });
  }
  allPrice(){
    let that = this
    this.$allP.on('click',function(){
      $('.allPrice').slideDown()
    })
    this.$allC.on('click',function(){
      $('.allPrice').slideUp()
    })
  }
}
